<!-- 余额弹窗 -->
<template>
	<view class="balance-popup">
		<cl-popup direction="center" :visible.sync="show">
			<view class="balance__content">
				<view class="title">当前余额不足</view>
				<view class="money"
					>余额：{{ userInfo.subsidiesAmount }}元</view
				>
				<view
					class="btn share"
					v-if="userInfo.remaining > 0"
					@click="share"
					>分享好友，再刮1次</view
				>
				<view class="btn do" v-else @click="show = false"
					>我知道了</view
				>
			</view>
		</cl-popup>
	</view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
	data() {
		return {
			show: true
		};
	},
	computed: {
		...mapGetters(["userInfo", "conf"])
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		share() {
			this.close();
			this.$emit("share");
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.cl-popup {
	background-color: transparent;
	&__container {
		padding: 0;
	}
}
.balance__content {
	border-radius: 16rpx;
	background-color: #f24e36;
	padding: 30rpx;

	.title,
	.money {
		text-align: center;
		color: #fae480;
	}
	.title {
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	.money {
		font-size: 34rpx;
	}
	.btn {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #f24938;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
	.share {
		background-image: linear-gradient(to bottom, #ffed93, #fdb626);
	}
	.do {
		border: 2rpx solid #fc9481;
		color: #ffd1a3;
	}
}
</style>
